<template>
  <div id="globalMonitor">
      <!--页面地铁-->
    <div class="trainMap">
      <div class="map">
        <selectMonitor style="position: absolute; top: 10px; z-index:100;"> </selectMonitor>
        <my-map class="my-map" style="position: absolute; z-index:80;"> </my-map>
      </div>
      <div class="trainlist">
        <train-list> </train-list>
      </div>
    </div>
    <div class="infoMap">
      <line-info> </line-info>
    </div>
  </div>
</template>

<script>
	import myMap from "@/components/GlobalMonitoring/Amap.vue"
  import trainList from "@/components/GlobalMonitoring/trainList.vue";
  import lineInfo from "@/components/GlobalMonitoring/lineInfo";
  import selectMonitor from "@/components/GlobalMonitoring/selectMonitor";

	export default {
		name: "lineMonitering",
		components:{
      'my-map': myMap,
      'train-list': trainList,
      'line-info': lineInfo,
      'selectMonitor' : selectMonitor
		},
		data() {
			return {
			}
		}
	}
</script>

<style>

#globalMonitor{
  display: flex;
  height: 844px;
  width: 1663px;
}

.trainMap{
  width: 1022px;
  height: 844px;
  /*margin-left: 20px;*/
  /*margin-top: 21px;*/
  /*padding: 0;*/
  display: flex;
  flex-direction: column;
  margin-right: 39px;
}


.trainMap .map{
  height: 615px;
  width: 1022px;
  margin-bottom: 0.5px;
  padding: 0;
  position: relative;
  flex: none;
}

.trainMap .my-map{
  height: 615px;
  width: 1022px;
}

.trainMap .trainlist {
  height: 312px;
  padding: 0;
  margin-bottom: 9px;
}


.infoMap {
  width: 620px;
  height: 844px;
  padding: 0;
}
</style>
